import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { NavableRouteObject, NavItem } from '#types/routeTypes';
import App from './App';
import Home from './Home';
import { faAtom, faHome, faStar } from '@fortawesome/free-solid-svg-icons';
import Example from './Example';
import OhMyKanban from './OhMyKanban';

/**
 * TODO: 增加功能模块时，在这里配置路由和主导航
 */
const routesConfig: NavableRouteObject[] = [
  {
    index: true,
    element: <Home />,
    pathForLink: '/',
    displayName: '首页',
    icon: faHome,
    end: true,
  },
  /* ---- <路由和导航配置> ---- */
  // {
  //   path: '/example',
  //   element: <Example />,
  //   pathForLink: '/example',
  //   displayName: '例子',
  //   icon: faAtom,
  // },
  /* ---- </路由和导航配置> ---- */
  {
    path: '/example',
    element: <Example />,
    pathForLink: '/example',
    displayName: 'JSX 例子',
    icon: faAtom,
  },
  {
    path: '/oh-my-kanban',
    element: <OhMyKanban />,
    pathForLink: '/oh-my-kanban',
    displayName: '帅醒看板',
    icon: faStar,
  },
];

const router = createBrowserRouter(
  [
    {
      element: <App navItems={getNavItems()} />,
      children: [
        ...routesConfig,
        {
          path: '*',
          element: <Home />,
        },
      ],
    },
  ],
  { basename: '/geektime-column-oh-my-kit' }
);

const Routes = () => <RouterProvider router={router} />;

function getNavItems(): NavItem[] {
  return routesConfig.map((route) => {
    const { pathForLink, displayName, icon, end } = route;
    return { pathForLink, displayName, icon, end };
  });
}

export default Routes;
